<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="个人信息" bgColor="#da708b" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="myi_item">
			<view class="myii_list margin_b">
				<view class="myiil_tit">会员号</view>
				<view class="myiil_txt font_b">{{user_infos.clientNo}}</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="myii_list">
				<view class="myiil_tit">头像</view>
				<view class="myiil_img">
					<button class="avatar_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="user_infos.clientAvatarUrl"></image>
					</button>
				</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="myii_line"></view>
			<view class="myii_list">
				<view class="myiil_tit">昵称</view>
				<view class="myiil_txt">
					<input class="nickname_inp" type="nickname" v-model="user_infos.clientNickname" @blur="bindblur"
						@input="bindinput" />
				</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
		</view>
		<view class="myi_item">
			<view class="myii_list" @tap.stop="open_pop('手机号')">
				<view class="myiil_tit">手机</view>
				<view class="myiil_txt">{{user_infos.clientPhone}}</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="myii_line"></view>
			<view class="myii_list" @tap.stop="open_pop('邮箱')">
				<view class="myiil_tit">邮箱</view>
				<view class="myiil_txt">{{user_infos.clientMailbox}}</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="myii_line"></view>
			<picker mode="date" :value="user_infos.clientBirthday" :start="startdate" :end="enddate"
				@change="setBirthday">
				<view class="myii_list">
					<view class="myiil_tit">生日</view>
					<uni-dateformat class="myiil_txt" :date="user_infos.clientBirthday"
						format="yyyy-MM-dd"></uni-dateformat>
					<!-- <view class="myiil_txt">{{user_infos.clientBirthday}}</view> -->
					<view class="myiil_icon">
						<uni-icons type="right" size="20" color="#aaa"></uni-icons>
					</view>
				</view>
			</picker>
			<view class="myii_line"></view>
			<view class="myii_list" @tap.stop="goAddress">
				<view class="myiil_tit">收货地址</view>
				<view class="myiil_txt myiilt_add">修改/添加</view>
				<view class="myiil_icon">
					<uni-icons type="right" size="20" color="#aaa"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="pop_info" type="bottom" :is-mask-click="false">
			<view class="pop_info">
				<view class="popi_tit">设置{{popi_tit}}</view>
				<view class="popi_con">
					<uni-forms ref="frm_info">
						<uni-forms-item v-if="popi_tit=='手机号'">
							<uni-easyinput v-model="user_infos.clientPhone" errorMessage focus></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item v-else-if="popi_tit=='邮箱'">
							<uni-easyinput v-model="user_infos.clientMailbox" errorMessage focus></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="popi_btn">
					<button type="default" size="mini" @click="pop_cancel">取消</button>
					<button class="popibtn_btn" type="default" size="mini" @click="save_info_verify">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog" class="popup">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提示"
				:content="text"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const alertDialog = ref()
	const msgType = ref('')
	const text = ref("")
	const pop_info = ref(null)
	const popi_tit = ref("手机号")
	const user_infos = ref({})
	const startdate = ref("1900-01-01")
	const enddate = ref("2999-12-31")
	const setBirthday = (e) => {
		console.log(new Date(e.detail.value).getTime())
		user_infos.value.clientBirthday = new Date(e.detail.value).getTime()
		console.log(user_infos.value)
		save_info()
	}
	const chooseavatar = (e) => {
		console.log(e)
	}
	const dialogToggle = (type) => {
		msgType.value = type
		alertDialog.value.open()
	}
	const open_pop = (t) => {
		popi_tit.value = t
		pop_info.value.open();
	
	}
	const pop_cancel = () => {
		pop_info.value.close();
	}
	
	const bindblur = (e) => {
		user_infos.value.clientNickname = e.detail.value
		save_info()
	}
	const bindinput = (e) => {
		user_infos.value.clientNickname = e.detail.value
	}
	const onChooseAvatar = (e) => {
		console.log(e)
		user_infos.clientAvatarUrl = e.detail.avatarUrl
		uni.showLoading({
			title: '加载中'
		});
		uni.uploadFile({
			url: getApp().globalData.baseUrl + "/setavatar",
			filePath: e.detail.avatarUrl,
			name: "file",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			success: (res) => {
				console.log(res)
				uni.hideLoading();
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	const goAddress = () => {
		uni.navigateTo({
			url: "/pages/delivery_address/delivery_address"
		})
	}
	const save_info_verify = () => {
		if (popi_tit.value == '手机号') {
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(user_infos.value.clientPhone)) {
				dialogToggle('error')
				text.value = "请输入正确的手机号"
			} else {
				pop_info.value.close();
				//保存用户信息
				uni.request({
					url: getApp().globalData.baseUrl + "/setinfo",
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: user_infos.value,
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		} else if (popi_tit.value == '邮箱') {
			console.log(1)
			if (!/^(?=.{1,256})(?=.{1,64}@.{1,255}$)[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z]{2,})+$/
				.test(user_infos.value.clientMailbox)) {
				dialogToggle('error')
				text.value = "请输入正确的邮箱"
			} else {
				pop_info.value.close();
				//保存用户信息
				uni.request({
					url: getApp().globalData.baseUrl + "/setinfo",
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: user_infos.value,
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
	const save_info = () => {
		pop_info.value.close();
		console.log(user_infos.value)
		//保存用户信息
		uni.request({
			url: getApp().globalData.baseUrl + "/setinfo",
			method: "POST",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: user_infos.value,
			success: (res) => {
				console.log(res)
			},
			fail: (err) => {
				console.log(err)
			}
		})
	
	}
	const getUserInfos = () => {
		//获取个人信息
		console.log(JSON.parse(uni.getStorageSync("user_info")))
		uni.request({
			url: getApp().globalData.baseUrl + "/getinfo",
			method: "GET",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				openId: JSON.parse(uni.getStorageSync("user_info")).openId
			},
			success: (res) => {
				console.log(res)
				user_infos.value = res.data.value
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			getUserInfos()
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.myi_item {
		width: 95vw;
		margin: 10rpx 6rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 10rpx;
		font-size: 30rpx;
	}
	
	.myii_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 60rpx;
	
	}
	
	.myiil_img image {
		width: 96rpx;
		height: 96rpx;
	}
	
	.myiil_tit {
		width: 60vw;
	}
	
	.myii_line {
		height: 4rpx;
		border-bottom: 1px solid #eee;
		margin: 6rpx;
	}
	
	.myiilt_add {
		color: #aaa;
	}
	
	.pop_info {
		padding: 40rpx;
		border-radius: 30rpx;
		background-color: #fff;
	}
	
	.popi_tit {
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
	
	.popi_con {
		height: 100rpx;
	}
	
	.popi_btn {
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		align-items: center;
	}
	
	.popi_btn button {
		font-size: 32rpx;
		width: 200rpx;
	
	}
	
	.popibtn_btn {
		background-color: #e77c90;
		color: #fff;
	}
	
	.font_b {
		font-weight: bold;
	}
	
	.margin_b {
		margin-bottom: 20rpx;
	}
	
	.avatar_btn {
		padding: 0;
		width: 96rpx;
		height: 96rpx;
		border: none;
		outline: none;
	}
	
	.nickname_inp {
		padding-right: 18rpx;
		text-align: right;
	}
</style>